<template>
	<view style="margin: auto 20rpx;">
		
		<view class="home">
				<!--circular用来设置循环轮播   indicator-dots设置下面小圆点用来点击 -->
				<swiper circular indicator-dots>
					<!-- v-for循环遍历数组 -->
					<swiper-item v-for="item in swipers" >
						<image :src="item"></image>
					</swiper-item>
				</swiper>
			</view>
		
		<view class="box">
					<view class="label" v-for="(row,index) in orderTypeLise" :key="row.name" hover-class="hover" @click="toOrderType(row.name)">
						<view class="icon">
							<view class="badge" v-if="row.badge>0">{{row.badge}}</view>
							<image :src="'../../static/'+row.icon"></image>
						</view>
						{{row.name}}
					</view>
		</view>
		
		
		<view style="display: flex;height: 60rpx;line-height: 60rpx;">
			<view>
				<image src="../../static/zhishi.png" style="width: 60rpx;height: 60rpx;"></image>
			</view>
			<view style="margin-left: 20rpx;">
				<text style="font-size: 35rpx;font-weight: bold;">知识点练习</text>
			</view>
			<view style="margin-left: 20rpx;">
				<text style="color: #BBBBBB;">刷题要刷到点子上...</text>
			</view>
		</view>
		
		
		
		<view v-for="(item,index) in webList">
			<view style="display: flex;margin-top: 40rpx;height: 60rpx;line-height: 60rpx;">
				<view style="display: flex;width: 90%;">
					<view @click="extent(item,index)">
						<image v-if="item.extend" src="../../static/shangjiaotou.png" style="width: 60rpx;height: 60rpx;"></image>
						<image v-else src="../../static/tixi.png" style="width: 60rpx;height: 60rpx;"></image>
					</view>
					
					<view style="margin-left: 30rpx;height: 60rpx;line-height: 60rpx;" @click="extent(item,index)">
						<text style="font-size: 35rpx;">{{item.knowName}}</text>
					</view>
				</view>
				
				 <view style="width: 120rpx;height: 120rpx;display: flex;justify-content: center;align-items: center;">	
					<image src="../../static/you.png" style="width: 50rpx;height: 50rpx;"></image>
				 </view>
			</view>

			<view style="margin-left: 90rpx;color: #999999;" @click="extent(item,index)">
				<text>已完成</text>
				<text>{{item.okNum}}</text>
				<text>/</text>
				<text>{{item.allNum}}</text>
			</view>
			
			
			<view  v-if="item.extend" v-for="son in item.pointList" >
				
				
				<!-- <view style="display: flex;margin-top: 40rpx;height: 60rpx;line-height: 60rpx;">
					<view>
						<image src="../../static/point.png" style="width: 60rpx;height: 60rpx;"></image>
					</view>
					
					<view style="margin-left: 30rpx;">
						<text style="font-size: 35rpx;">{{son.knowPoint}}</text>
					</view>
				</view> -->
				
				
				<view style="display: flex;margin-top: 40rpx;line-height: 60rpx;" @click="goToTest(son)">
					<view style="display: flex;width: 90%;">
						<view>
							<image  src="../../static/point.png" style="width: 60rpx;height: 60rpx;"></image>
						</view>
						
						<view style="margin-left: 30rpx;line-height: 60rpx;">
							<text style="font-size: 35rpx;">{{son.knowPoint}}</text>
						</view>
					</view>
					
					 <view style="width: 120rpx;height: 120rpx;display: flex;justify-content: center;align-items: center;">	
						<image src="../../static/you.png" style="width: 50rpx;height: 50rpx;"></image>
					 </view>
				</view>
				
				
				<view style="margin-left: 90rpx;color: #999999;" @click="goToTest(son)">
					<text>已完成</text>
					<text>{{son.okNum}}</text>
					<text>/</text>
					<text>{{son.allNum}}</text>
				</view>
				
				
			</view>
			
			
			
		</view>
		
		
			<!-- <view v-for="(item,index) in webList" class="content" >
					<navigator :url="`/subpkg/my-blog/my-blog?type=1&authorId=${item.id}`">
						<view class="row" style="height: 180rpx;">
							<view >
								<image :src="item.avatarUrl"  style="width: 150rpx;height: 150rpx;margin-top: 20rpx;"></image>
							</view>
							<view class="row_right" style="margin-left: 20rpx;">
								<view class="assistant_ly" >
									<text class="shenglue" style="font-size: 30rpx;">{{item.nickName==null?(item.name==null?item.username:item.name):item.nickName}}</text>
									<text class="shenglue" style="font-size: 30rpx;">文章发布总数 {{item.num==null?'0':item.num}}</text>
								</view>
							</view>
							<view class="row_right">
								<view class="assistant_ly" style="margin-left: 40rpx;">
									<text class="shenglue" style="font-size: 30rpx;">综合指标 {{item.num==null?'0':item.num}}</text>
								</view>
							</view>
						</view>
					</navigator>
					<view style="background: LightGrey;height: 1rpx;width: 100%;"></view>
			</view> -->
			<!-- <view class="loading" v-if="loading">正在加载更多...</view> -->
			<!-- <view v-else class="nomore">暂无更多内容</view> -->
		
	</view>
</template>

<script>
	export default {
		props:{
			searchText:{	//选择块级显示还是圆形显示
				type: String,
				default: ''
			},
			
		},
		mounted() {
		},
		onLoad() {
		},
		onShow() {
			this.open();
		},
		onPullDownRefresh() {
			this.refresh();
		},
		onReachBottom() {
			this.pullMore();
		},
		
		data() {
			return {
				page:1, // 第一页 
				allpage:0, // 总页数
				loading:true, // 加载状态
				scrollTop:0,
				height:'0px',
				refresher:true,
				triggered:false,
				canQuery:true,
				webList:[],
				swipers:[
					'https://img-blog.csdnimg.cn/img_convert/ec13b1d884b422ad6ac1746504fa0454.png',
					'https://img-blog.csdnimg.cn/img_convert/462ba175388a6005201d8a73f186c527.png',
					'https://img-blog.csdnimg.cn/img_convert/213a362a143bd47b8b4e3dad5138d53d.png',
				],
								
				orderTypeLise: [
					{
						name: '精选试题',
						icon: 'article.png',
						//badge: 1
					},
					{
						name: '拔高试题',
						icon: 'jifen.png',
						//badge: 2
					},
					{
						name: '精编练习',
						icon: 'lishi.png',
						//badge: 61
					},
					
					{
						name: '错题记录',
						icon: 'collect.png',
						//badge: 9
					}
				],
				questionList:[
					
				]
				
			};
		},
		methods:{
			open(){
				this.webList = [];
				this.page = 1;
				this.canQuery = true;
				this.allpage = 0;
				this.getBlogList();
			},
			openSearch(e){
				this.searchText=e;
				this.getBlogList();
			},
			extent(item,index){
				
				let loginRes = this.checkLogin('/pages/home/home','2');
				if(!loginRes){return ;}
				
				
				let arrays = this.webList;
				if(arrays[index].extend==undefined){
					arrays[index].extend=1;
				}else{
					arrays[index].extend=undefined;
				}
				for (var i = 0; i < arrays.length; i++) {
					if(i!=index){
						arrays[i].extend = undefined;
					}
				}
				
				this.webList=arrays;
				console.log('--haha--',this.webList);
				this.$forceUpdate();
			},
			async getBlogList(){
				console.log('canQuery',this.canQuery);
				if(this.canQuery){
					this.canQuery = false;
					
					const {data:res} =await uni.$http.post('/st_know/page_st_vo?rows=10&page='+this.page,{});
				
					let length = res.data.records.length;
					for (var i = 0; i < length; i++) {
						this.webList.push(res.data.records[i]);
					}
					this.allpage = res.data.pages;
					this.page=res.data.pageNum+1;
					this.canQuery = true;
					 this.$emit('calHeight');
				}
				
			},
			goToTest(son){
				if(son.allNum==0){
					uni.showToast({
						title:'暂无习题！'
					})
					return false;
				}else{
					uni.navigateTo({
						url:'/subpkg/exam-detail/exam-detail?id='+son.id
					})
				}
				 
			},
			
			refresh(){
				this.webList = [];
				this.allpage = 0;
				this.page=1;
				this.getBlogList();
			    uni.stopPullDownRefresh();
			},
			
			
			
			pullMore(){
				if(this.page<=this.allpage||this.allpage==0){
					this.getBlogList();
				}else{
					this.loading=false
				}
					
			}

			
			
		}
	}
</script>

<style lang="scss">

.loading{
	text-align: center;
}
.nomore{
	text-align: center;
}
.title{
	font-weight: bold;
	font-size: 50rpx;
}
.detail{
	color: #999;
}
.content{
	padding-left: 30rpx;
	padding-right: 30rpx;
	padding-bottom: 20rpx;
}
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
color: transparent;
}
page {
   }
   .line{
   	width: 100%;
   	height: 10px;
   }
   .assistant_ly{
     text-align: left;
     display:flex;
     flex-direction:column;
     background-color: white;
     justify-content: center;
   }


	.line{
		width: 100%;
		height: 10px;
	}
	.row {
		margin-bottom: 10rpx;
		background: white;
		display: flex;
		width: 100%;
		height: 50px;

		.row_logo {
			width: 18%;
			display: flex;
			align-items: center;

			image {
				width: 32px;
				height: 32px;
				margin: auto;
				border-radius: 5px;
			}
		}

		.row_right {
			position: relative;
			height: 100%;
			width: 60%;
			display: flex;
			align-items: center;
			flex-direction: row; 
			align-items: center;
			border: {
				bottom: 1px solid #DDDDDD;
			}

			text {
				font-size: 16px;
				font-family: 'syht';
				display: block;
			}
			.icon_right{
				position: absolute;
				right: 10px;
				width: 15px;
				height: 35px;
				opacity: .5;
			}

		}



	}

	.row:last-child {
		.row_right {
			border: 0;
		}
	}
	
	
	// 文本过长显示省略号，一般高度固定且不是auto
	.shenglue {
	        width: 100%;
	        margin-top: 15rpx;
	        color: #333333;
	        font-size: 0.7em;
	        overflow: hidden;
	        text-overflow:ellipsis;
	        white-space: nowrap;
	}
	
	// 文本过长换行显示，高度不固定
	.huanhang {
	        display:inline-block;
	        width: 100%;
	        height: auto;
	        font-family: Gibson;
	        font-size: 15px;
	        word-break: break-all;
	        text-overflow: ellipsis;
	        word-wrap: break-word;
	        white-space: pre-wrap;
	}
.home{
	margin-bottom: 15rpx;
		swiper{
			height: 270rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.box {
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		width: 100%;
		background-color: #fefefe;
		border-radius: 14upx;
		/*  阴影 */
		box-shadow: 0 0 10upx rgba(0, 0, 0, 0.15);
		display: flex;
		align-items: center;
		justify-content: flex-start;
			flex-wrap: wrap;
	
		// 包含图片，数字气泡，图标的view
		.label {
		    // padding-top:10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 25%;
			height: 16vw;
			color: #666666;
			font-size: 26upx;
	
			.icon {
				position: relative;
				width: 6vw;
				height: 6vw;
				margin: 0 1vw 2vw 1vw;
	
				// 数字气泡
				.badge {
					position: absolute;
					width: 4vw;
					height: 4vw;
					background-color: #ec6d2c;
					top: -1vw;
					right: -1vw;
					border-radius: 100%;
					font-size: 20upx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 10;
				}
	
				// 文字上的图片
				image {
					width: 6vw;
					height: 6vw;
					z-index: 9;
				}
			}
		}
	
	}
</style>
